<template>
  <el-card shadow="never" class="table-container">
    <div style="margin-bottom: 20px">
      <el-button type="primary" @click="handleBack">
        {{ $t("common.back") }}
      </el-button>
    </div>
    <el-tabs type="border-card" v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="业务表单" name="businessForm">
        <component
          v-bind:is="current"
          ref="taskFromRef"
          :task="task"
        ></component>
      </el-tab-pane>
      <el-tab-pane label="当前任务" name="task" v-if="!route.query.type">
        <current-task :proc-inst-id="route.query.taskId as string" />
      </el-tab-pane>
      <el-tab-pane label="流程办理记录" name="record">
        <proc-inst-comment :proc-inst-id="route.query.taskId as string" />
      </el-tab-pane>
      <el-tab-pane
        label="流程附件"
        name="attachment"
        v-if="task.formKey && task.formKey.startsWith('Task')"
      >
        <task-attachment
          :proc-inst-id="route.query.taskId as string"
        ></task-attachment>
      </el-tab-pane>
      <el-tab-pane label="流程图" name="diagram" v-if="!route.query.type">
        <proc-inst-diagram :proc-inst-id="route.query.taskId as string" />
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>
<script setup lang="ts">
import { ref, reactive, computed, defineAsyncComponent } from "vue";
import { useRoute, useRouter } from "vue-router";
import { type TabsPaneContext } from "element-plus";
import { routerUtil } from "jmash-core";
import { procApi, type ProcInfoModel } from "xyvcard-workflow";
import { useI18n } from "vue-i18n";
import { procDefApi } from "@/api/flow/prodef";
import type { HiProcInstModel } from "@/api/flow/prodef/types";
import { registeredTaskComponents } from "@/taskcoms";
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const activeName = ref("businessForm");
//切换Tab
const tabClick = (tab: TabsPaneContext, event: Event) => {};
//动态组件
const currentA = ref(registeredTaskComponents["HolidayRequestTask"]);

//任务获取
const task = reactive({} as HiProcInstModel);
if (route.query.taskId) {
  procApi
    .findProcInfo({ processKey: route.query.processKey as string })
    .then(({ data }) => {
      if (data.viewFormId && data.viewFormId.includes("Task")) {
        console.log("Task");
        currentA.value = registeredTaskComponents[data.viewFormId];
        task.formKey = data.viewFormId;
      } else {
        console.log("FormKey:");
        currentA.value = registeredTaskComponents["FormDynamicCreate"];
        task.formKey = data.viewFormId;
      }
    });
  procDefApi
    .findHiProcinst({ id: route.query.taskId as string })
    .then((res) => {
      Object.assign(task, res.data);
    });
}

//动态加载异步组件.
const current = computed(() => {
  return defineAsyncComponent(currentA.value as any);
});

//返回、关闭当前页签.
function handleBack() {
  routerUtil.closeTagView(route.fullPath, router, false);
}
</script>
